import { defineStore } from 'pinia'
import { ref, reactive } from 'vue'

export const usePlaygroundStore = defineStore('playground', () => {
    // 编辑器状态
    const codeState = reactive({
        html: '',
        css: '',
        javascript: ''
    })

    // UI 状态
    const currentTab = ref('html')
    const isFullscreen = ref(false)
    const isLoading = ref(false)

    // 加载代码示例
    function loadExample(example) {
        if (!example?.initialCode) return

        isLoading.value = true
        try {
            codeState.html = example.initialCode.html || ''
            codeState.css = example.initialCode.css || ''
            codeState.javascript = example.initialCode.javascript || ''
        } finally {
            isLoading.value = false
        }
    }

    // 重置状态
    function resetState() {
        codeState.html = ''
        codeState.css = ''
        codeState.javascript = ''
        currentTab.value = 'html'
        isFullscreen.value = false
        isLoading.value = false
    }

    return {
        code: codeState,
        currentTab,
        isFullscreen,
        isLoading,
        loadExample,
        resetState
    }
})